<template>
  <div class="body">
    <div class="login-container">
      <h2 class="login-title">Login</h2>
      <el-form class="login-form" ref="loginForm" :model="loginData" :rules="rules">
        <el-form-item class="login-form-item" prop="userName">
          <el-input v-model="loginData.userName" placeholder="用户名"></el-input>
        </el-form-item>
        <br>
        <el-form-item class="login-form-item" prop="password">
          <el-input v-model="loginData.password" @keydown.native.enter="login('loginForm')" placeholder="密码"
                    show-password></el-input>
        </el-form-item>
<!--        <el-form-item class="login-form-item">-->
<!--          <el-checkbox v-model="isChecked">管理员</el-checkbox>-->
<!--        </el-form-item>-->
        <!--            <div class="login-error" v-if="errorMessage">{{ errorMessage }}</div>-->
        <el-button class="login-button" type="primary" @click="login('loginForm')">登录</el-button>
      </el-form>
      <div style="text-align: center; margin-top: 10px;">
        <a href="/register">没有账号?点我注册</a>
      </div>
    </div>
  </div>
</template>

<style>
.body {
  animation: gradientAnimation 10s infinite;
  background: linear-gradient(to right, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 800% 800%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  font-family: 'Arial', sans-serif;
}

.login-container {
  background: #fff;
  width: 400px;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.login-title {
  text-align: center;
  font-size: 24px;
  margin-bottom: 20px;
  color: #333;
}

.login-form {
  display: flex;
  flex-direction: column;
}

.login-form-item {
  margin-bottom: 10px;
}

.login-button {
  margin-top: 20px;
}

.login-error {
  text-align: center;
  color: red;
  margin-top: 10px;
}

@keyframes gradientAnimation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
</style>

<script>
export default {
  data() {
    return {
      loginData: {
        userName: '',
        password: '',
      },
      errorMessage: '',
      rules: {
        userName: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
          {min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 8, max: 15, message: '长度在 8 到 15 个字符', trigger: 'blur'}
        ],
      }
    }
  },
  computed: {
  },


  methods: {
    login(loginForm) {
      this.$refs[loginForm].validate((valid) => {
        if (valid) {
          this.axios.post('/api/users/login', {
            userName: this.loginData.userName,
            password: this.loginData.password,
          })
              .then(response => {
                const data = response.data;
                console.log(data);
                //登录成功
                if (data.code === 201) {
                  this.errorMessage = '';
                  this.$message({
                    message: data.message,
                    type: 'success'
                  });
                  //把装着登录成功用户信息的对象保存到localStorage
                  localStorage.user = JSON.stringify(response.data.data);

                  this.$router.push('/home');
                  // window.location.href = "/";
                  // console.log(localStorage.user)
                } else {
                  // this.errorMessage = data.message;
                  this.$message({
                    message: data.message,
                    type: 'error'
                  });

                }
              })
              .catch(error => {
                // this.errorMessage = '登录失败，请稍后重试';
                // console.error(error);
                this.$message({
                  message: error,
                  type: 'error'
                });

              });
        }
      });


    },
    logout() {
      //发请求退出登录
      this.axios.get("/api/users/logout").then(response => {
        localStorage.clear();//清空登录成功时保存的数据
        location.href = "/";
		this.$router.push('/login');
      })

    }
  },
  // created: function (){
  //   //发请求
  //   this.axios.get("/api/users/isLogin").then(response => {
  //     const data = response.data;
  //     if (data.code === 200) {
  //       this.$confirm('您已登录！是否重新登录？', '提示', {
  //         confirmButtonText: '是',
  //         cancelButtonText: '否',
  //         type: 'warning'
  //       })
  //           .then(() => {
  //             // 用户选择登录，进行页面跳转到登录页
  //             this.logout();
  //             window.location.href = '/login.html';
  //           })
  //           .catch(() => {
  //             // 用户选择不登录，返回主页或其他操作
  //             window.location.href = '/';
  //           });
  //
  //       //已登录自动跳转
  //       // window.location.href = '/';
  //     }else {
  //       //未登录清空localStorage
  //       localStorage.clear();//清空登录成功时保存的数据
  //     }
  //
  //   })
  // }
}

</script>
